<template>
  <view class="footer-box">
    <text style="color: #f56c6c">{{ price }}</text>
    <view class="btn-box">
      <view class="btn-cancel" :style="{ background: cancelBgColor }" @click="toCancel" v-if="isCancel">{{ cancelText }} </view>
      <view class="btn-sign" @click="toPay">{{ payText }}</view>
    </view>
  </view>
  <CommonPopup v-model="cancelShow" :popupMsg="cancelMsg" @confirm="cancelSure"></CommonPopup>
</template>

<script setup>
import { ref } from "vue";
import CommonPopup from "@/components/CommonPopup";

const props = defineProps({
  price: {
    type: [Number, String],
    default: 0,
  },
  // 是否显示撤销按钮
  isCancel: {
    type: Boolean,
    default: false,
  },
  //是否没有确认框的左边按钮
  isOtherLeftBtn: {
    type: Boolean,
    default: false,
  },
  cancelBgColor: {
    type: String,
    default: "#F56C6C",
  },
  // 撤销文字（取消/撤销/...）
  cancelText: {
    type: String,
    default: "撤销",
  },
  // 撤销提示语
  cancelMsg: {
    type: String,
    default: "是否确认撤销？",
  },
  // 支付提示语
  payText: {
    type: String,
    default: "支 付",
  },
});

const emit = defineEmits(["toPay", "toCancel"]);

const cancelShow = ref(false);

// 打开确认撤销提示框
const toCancel = () => {
  if (props.isOtherLeftBtn) {
    emit("toCancel");
  } else {
    cancelShow.value = true;
  }
};

// 确认撤销事件
const cancelSure = () => {
  emit("toCancel");
};

// 支付
const toPay = () => {
  emit("toPay");
};
</script>

<style lang="scss" scoped>
.footer-box {
  width: 100%;
  height: 120rpx;
  padding: 0rpx 20rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 98;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  background-color: #fff;
  color: #fff;
  box-sizing: border-box;
  box-shadow: 0px -6rpx 12rpx 0px rgba(0, 0, 0, 0.02);

  .btn-box {
    display: flex;
    align-items: center;
  }

  .btn-cancel {
    width: 168rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2rpx;
    font-size: 24rpx;
  }

  .btn-sign {
    width: 168rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $uni-primary;
    /* letter-spacing: 12rpx; */
    font-size: 24rpx;
    margin-left: 20rpx;
  }
}
</style>
